<template>
  <el-card class="box-card">
    <div slot="header">
      <div
        style="display:flex;justify-content:space-between;align-items:center;"
      >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item prop="courseName" label="课程名称">
            <el-input
              v-model="formInline.courseName"
              placeholder="课程名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="formInline.status" placeholder="状态">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="草稿" :value="0"></el-option>
              <el-option label="已上架" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="reset">清空</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="goToNewCourse">新建课程</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="courseName" label="课程名称"></el-table-column>
      <el-table-column prop="price" label="价格">
        <template slot-scope="scope">
          <span>{{ scope.row.price ? "￥" + scope.row.price : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sortNum" label="排序"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div
            :class="{
              enable: scope.row.status === 1,
              disable: scope.row.status === 0
            }"
          ></div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="click1(scope.row)" type="text" size="small">{{
            scope.row.status === 0 ? "上架" : "下架"
          }}</el-button>
          <el-button @click="click2(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button @click="click3(scope.row)" type="text" size="small"
            >内容管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:20px;display:flex;justify-content:center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCourseLists, changeState } from './api/index'
export default Vue.extend({
  name: 'CourseIndex',
  data () {
    return {
      formInline: {
        courseName: '',
        status: null,
        currentPage: 1,
        pageSize: 5
      },
      tableData: [],
      total: 0
    }
  },
  async created () {
    await this.getCourseLists()
  },
  methods: {
    async onSubmit () {
      console.log('onSubmit')
      console.log(this.formInline)
      if (this.formInline.currentPage !== 1) {
        this.formInline.currentPage = 1
      } else {
        this.getCourseLists()
      }
    },
    async reset () {
      console.log('reset')
      if (this.formInline.currentPage !== 1) {
        this.formInline = {
          courseName: '',
          status: null,
          currentPage: 1,
          pageSize: 5
        }
      } else {
        this.formInline = {
          courseName: '',
          status: null,
          currentPage: 1,
          pageSize: 5
        }
        this.getCourseLists()
      }
    },
    async getCourseLists () {
      const { data } = await getCourseLists(this.formInline)
      console.log('data', data)
      this.tableData = data.data.records
      this.total = data.data.total
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      if (this.formInline.currentPage !== 1) {
        this.formInline.currentPage = 1
      } else {
        this.getCourseLists()
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.formInline.currentPage = val
    },
    async click1 (row) {
      console.log(row)
      await changeState({
        courseId: row.id,
        status: row.status === 0 ? 1 : 0
      })
      this.$message.success('操作成功')
      await this.getCourseLists()
    },
    click2 (row) {
      console.log(row)
      this.$router.push({
        name: 'course-edit',
        params: {
          courseId: row.id
        }
      })
    },
    click3 (row) {
      console.log(row)
      this.$router.push({
        name: 'course-section',
        params: {
          courseId: row.id
        }
      })
    },
    goToNewCourse () {
      this.$router.push({
        name: 'course-create'
      })
    }
  },
  watch: {
    'formInline.currentPage': {
      immediate: true,
      async handler (n, o) {
        console.log(n, o)
        await this.getCourseLists()
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.enable {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: green;
}
.disable {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
}
</style>
<style scoped>
.box-card >>> .el-form-item {
  margin-bottom: 0px !important;
}
</style>
